<%@ include file="../common/header.jsp" %>
<!-- Main Content -->
<div class="content">
  <%@ include file="../common/top_nav.jsp" %>

  <!-- Page Content -->
  <div class="container">
    <h2 class="text-center mb-4">用户列表</h2>

    <!-- 新增用户按钮 -->
    <button class="btn btn-success mb-4" data-bs-toggle="modal" data-bs-target="#addUserModal">新增用户</button>


    <!-- 查询用户表单 -->
    <form action="<c:url value='/user/list'/>" method="GET" class="mb-4">
      <div class="row">
        <div class="col-md-6">
          <input type="text" class="form-control" name="username" placeholder="请输入用户名" value="${param.username}">
        </div>
        <div class="col-md-6">
          <button type="submit" class="btn btn-primary w-100">查询</button>
        </div>
      </div>
    </form>

    <!-- 用户列表 -->
    <table class="table table-striped table-bordered">
      <thead>
      <tr>
        <th>编号</th>
        <th>用户名</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <!-- 这里通过JSTL显示用户列表 -->
      <c:forEach var="user" items="${list}">
        <tr>
          <td>${user.id}</td>
          <td>${user.username}</td>
          <td>
            <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#editUserModal" data-id="${user.id}" data-username="${user.username}">编辑</button>
            <a href="<c:url value='/user/delete?id=${user.id}'/>" class="btn btn-danger btn-sm" onclick="return confirm('确定要删除此用户吗？')">删除</a>
          </td>
        </tr>
      </c:forEach>
      </tbody>
    </table>

    <!-- 分页 -->
    <div class="text-center">
      <c:if test="${not empty userList}">
        <ul class="pagination">
          <li class="page-item ${pageNumber == 1 ? 'disabled' : ''}">
            <a class="page-link" href="?page=${pageNumber-1}">上一页</a>
          </li>
          <li class="page-item ${pageNumber == totalPages ? 'disabled' : ''}">
            <a class="page-link" href="?page=${pageNumber+1}">下一页</a>
          </li>
        </ul>
      </c:if>
    </div>
  </div>
</div>

<!-- 新增用户模态框 -->
<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addUserModalLabel">新增用户</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="<c:url value='/user/add'/>" method="POST">
        <div class="modal-body">
          <div class="mb-3">
            <label for="username" class="form-label">用户名</label>
            <input type="text" class="form-control" id="username" name="username" required>
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">密码</label>
            <input type="password" class="form-control" id="password" name="password" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">保存用户</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 编辑用户模态框 -->
<div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editUserModalLabel">编辑用户</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="<c:url value='/user/edit'/>" method="POST">
        <div class="modal-body">
          <input type="hidden" id="userId" name="id">
          <div class="mb-3">
            <label for="username" class="form-label">用户名</label>
            <input type="text" class="form-control" id="editUsername" name="username" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">保存更改</button>
        </div>
      </form>
    </div>
  </div>
</div>

<%@ include file="../common/footer.jsp" %>
<script>
  // 为编辑按钮添加点击事件，动态填充模态框表单
  var editModal = document.getElementById('editUserModal');
  editModal.addEventListener('show.bs.modal', function (event) {
    var button = event.relatedTarget;  // 获取触发事件的按钮
    var userId = button.getAttribute('data-id');
    var username = button.getAttribute('data-username');
    var email = button.getAttribute('data-email');
    var phone = button.getAttribute('data-phone');

    // 设置模态框中的值
    document.getElementById('userId').value = userId;
    document.getElementById('editUsername').value = username;
    document.getElementById('editEmail').value = email;
    document.getElementById('editPhone').value = phone;
  });
</script>